<template>
  <div class="awaitvluate-content">
    <van-empty
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="空空如也吧~"
      slot="houseItem"
      v-if="appointmentHouseList.length == 0"
    />
    <div
      class="appointmentHouseItem-box"
      v-for="item of appointmentHouseList"
      :key="item.id"
      @click="toHouseDetail(item.houseId)"
      v-else
    >
      <!-- @click="toAppointmentDetail(item.houseId)" -->
      <div class="lookhousetime-box">
        <p>{{item.lookHouseTime}}</p>
        <p >等待评价</p>
      </div>
      <house-item
        :houseItem="item.house"
        :imgPath="staticpath+item.house.images[0].path"
      />
      <div class="relation-box">
        <div @click.stop="toComment(item.houseId,item.id)">点击评价</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getMyAppointmentState,
  cancleAppointment,
  getAppointmentDetail,
} from "network/appointmentHouse";

import HouseItem from "components/common/houseitem/HouseItem";
import { mapState } from "vuex";

export default {
  name: "",
  components: {
    HouseItem,
  },
  data() {
    return {
      appointmentHouseList: [],
      staticpath: localStorage.getItem("staticpath"),
    };
  },
  methods: {
    tocancelLookHouse(orderId) {
      console.log(orderId);
      cancleAppointment({ orderId }).then((res) => {
        if (res.code == 200) {
          this.$toast({
            message: "取消成功",
            position: "bottom",
          });
          this.toGetMyAppointmentState();
        }
      });
    },
    toAppointmentDetail(houseId) {
      let houseDetailPath = "/housedetail?houseId=" + houseId;
      this.$router.push(houseDetailPath);
    },
    toGetMyAppointmentState() {
      let userId = this.userId;
      let code = 2;
      getMyAppointmentState({ userId, code }).then((res) => {
        console.log(res);
        if(res.code == 200) {
          this.appointmentHouseList = res.data;
        }
      });
    },
    toComment(houseId,orderId){
      this.$router.push({
        path:'/commenthouse',
        query:{
          houseId,
          orderId
        }
      })
    },
    toHouseDetail(houseId){
      this.$router.push("/housedetail?houseId=" + houseId)
    }
  },
  activated() {
    this.toGetMyAppointmentState();
  },
  computed: {
    ...mapState({
      userId: (state) => state.moduleUser.userId,
    }),
  },
};
</script>

<style scoped>
.awaitvluate-content {
  padding: 0 20px;
}
.appointmentHouseItem-box {
  margin-top: 20px;
  padding-bottom: 10px;
  border-bottom: 5px solid #eee;
}
.lookhousetime-box {
  display: flex;
  justify-content: space-between;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}
.lookhousetime-box p:nth-child(1) {
  font-size: 16px;
  font-weight: 700;
}
.lookhousetime-box p:nth-child(2) {
  font-size: 14px;
  color: green;
}
.box {
  height: 80px;
}
.relation-box {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  font-size: 12px;
}
.relation-box > div {
  height: 28px;
  line-height: 28px;
  margin-right: 10px;
  padding: 0 10px;
  border: 1px solid #ccc;
}
</style>